<script setup lang="ts">
import axios from 'axios'
import { getUserInfo, updateUserInfo } from '~/api/user'

const userString = localStorage.getItem('userInfo') as string
const userInfo = JSON.parse(userString)

const userInfoForm = reactive({
  ...userInfo,
})

async function submit() {
  const { nickName, sex, phoneNumber, email } = userInfoForm
  const updataUserInfo = {
    nickName,
    phoneNumber,
    email,
    sex,
    id: userInfo.id,
  }
  await updateUserInfo(updataUserInfo).then((res: any) => {
    if (res.code === 200) {
      ElMessage({
        message: '修改成功！',
        type: 'success',
      })
    }
  })
  await getUserInfo(userInfo.username).then((res: any) => {
    localStorage.setItem('userInfo', JSON.stringify(res.result))
  })
}

function beforeAvatarUpload(rawFile: any) {
  const types = ['image/jpeg', 'image/jpg', 'image/png']
  const isImage = types.includes(rawFile.type)
  if (!isImage) {
    ElMessage.error('图片必须是jpg或png格式!')
    return false
  }
  else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片不能超过2MB!')
    return false
  }
  return true
}

function upload(param: any) {
  const formData = new FormData()
  formData.append('file', param.file)
  const url = 'http://localhost:7777/uploadFile'
  axios.post(url, formData).then((data: any) => {
    console.log(data)
    const userAvatar = {
      id: userInfo.id,
      avatar: data.data.result,
    }

    updateUserInfo(userAvatar).then((res: any) => {
      if (res.code === 200) {
        userInfoForm.avatar = res.result

        ElMessage({
          message: '头像修改成功！',
          type: 'success',
        })
        getUserInfo(userInfo.username).then((res: any) => {
          localStorage.setItem('userInfo', JSON.stringify(res.result))
        })
        setTimeout(() => {
          location.reload()
        }, 500)
      }
    })
  }).catch((response: any) => {
    console.log(response)
  })
}
</script>

<template>
  <div class="main flex items-center justify-center">
    <div class="profile mt-8">
      <el-form
        ref="userInfo"
        :model="userInfo"
        label-width="120px"
      >
        <el-descriptions
          class="margin-top"
          title="我的信息"
          :column="1"
          size="large"
          border
        >
          <template #extra>
            <el-button type="primary" @click="submit">
              保存
            </el-button>
          </template>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="8">
                  <user />
                </el-icon>
                头像
              </div>
            </template>

            <el-upload
              class="avatar-uploader ml-10"
              action=""
              :http-request="upload"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="userInfoForm.avatar" :src="userInfoForm.avatar" class="avatar">
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="8">
                  <user />
                </el-icon>
                用户名
              </div>
            </template>

            <el-input
              v-model="userInfoForm.username"
              :placeholder="userInfo.username"
              disabled
            />
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="8">
                  <user />
                </el-icon>
                昵称
              </div>
            </template>

            <el-input
              v-model="userInfoForm.nickName"
              :placeholder="userInfo.nickName"
            />
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="8">
                  <user />
                </el-icon>
                性别
              </div>
            </template>

            <el-radio-group v-model="userInfoForm.sex">
              <el-radio value="1">
                男
              </el-radio>
              <el-radio value="0">
                女
              </el-radio>
            </el-radio-group>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="8">
                  <iphone />
                </el-icon>
                手机号
              </div>
            </template>
            <el-input
              v-model="userInfoForm.phoneNumber"
              :placeholder="userInfo.phoneNumber"
            />
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="8">
                  <Message />
                </el-icon>
                邮箱
              </div>
            </template>
            <el-input
              v-model="userInfoForm.email"
              :placeholder="userInfo.email"
            />
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main {
  width: 1000px;
}
.profile {
  width: 80%;
  height: 450px;
  display: flex;
  justify-content: center;
  align-content: center;
}

.avatar-uploader .avatar {
  width: 80px;
  height: 80px;
  display: block;
  border-radius: 50px;
}
</style>

<route lang="yaml">
  meta:
    layout: profile
  </route>
